import React, { useState } from "react";
import type { MenuProps } from "antd";
import { Menu, Layout } from "antd";
import {
    HomeOutlined,
    DatabaseOutlined,
} from "@ant-design/icons";
const { Sider } = Layout;
type MenuItem = Required<MenuProps>["items"][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}
const items: MenuItem[] = [
    getItem('主页', '1', <HomeOutlined />),
    getItem('数据管理', 'sub1', <DatabaseOutlined />, [
        getItem('数据字典', '3')
    ]),
];

function IndexSider() {
    const [collapsed, setCollapsed] = useState<boolean>(false);
    return (
        <Sider breakpoint={"md"} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
            <div className="logo">
                <img src={require("@/assets/img/logo.png")} alt="" />
                <span style={{ display: collapsed ? "none" : "inline-block" }}>尚医通管理系统</span>
            </div>
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
        </Sider>
    )
}
export default IndexSider;
